<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<script>
    window.jsTestIsAsync = true;
    var pageHeight = 1200;
    var pageWidth = 1000;

    var testScrolls = [
        {key: 'ArrowDown', expectedX: 0, expectedY: pageHeight - window.innerHeight},
        {key: 'ArrowUp', expectedX: 0, expectedY: 0},
        {key: 'ArrowRight', expectedX: pageWidth - window.innerWidth, expectedY: 0},
        {key: 'ArrowLeft', expectedX: 0, expectedY: 0},
        {key: 'End', expectedX: 0, expectedY: pageHeight - window.innerHeight},
        {key: 'Home', expectedX: 0, expectedY: 0},
        {key: 'PageDown', expectedX: 0, expectedY: pageHeight - window.innerHeight},
        {key: 'PageUp', expectedX: 0, expectedY: 0},
        {key: ' ', expectedX: 0, expectedY: pageHeight - window.innerHeight},
    ];
    var currentTest = -1;

    description("Test keyboard smooth scroll. The main purpose of this\
        test is to ensure that smooth scrolling on the compositor\
        works as intended (tested via virtual suite virtual/threaded/).");

    function runTestCase(testCase) {
        eventSender.keyDown(testCase.key);
        if (window.scrollX == testCase.expectedX && window.scrollY == testCase.expectedY) {
            testPassed(testCase.key + ' reached target');
            startNextTestCase();
        } else {
            requestAnimationFrame(function() {
                runTestCase(testCase);
            });
        }
    }

    function startNextTestCase() {
        currentTest++;
        if (currentTest >= testScrolls.length) {
            finishJSTest();
            return;
        }
        runTestCase(testScrolls[currentTest]);
    }

    function runTest() {
        if (!window.eventSender || !window.internals) {
            finishJSTest();
            return;
        }
        // Turn on smooth scrolling.
        internals.settings.setScrollAnimatorEnabled(true);

        startNextTestCase();
    }
    addEventListener('load', runTest);
</script>

<style>
    ::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }

    div {
        width: 200px;
        height: 20px;
        background-color: red;
    }

    html{
        padding: 0px;
        margin: 0px;
        width: 1000px;
        height: 1200px;
    }

    .top {
        position: absolute;
        top: 0px;
        left: 300px;
    }

    .middle{
        position: absolute;
        top: 575px;
        left: 300px;
    }

    .bottom {
        position: absolute;
        top: 1180px;
        left: 300px;
    }

    .left {
        position: absolute;
        top: 275px;
        left: 0px;
    }

    .right {
        position: absolute;
        top: 275px;
        left: 800px;
    }
</style>
<p id="description" style="width: 800px"></p>
<p id="console" style="width: 800px"></p>
<div class="top">Top of page</div>
<div class="bottom">Bottom of page</div>
<div class="left">Left of page</div>
<div class="right">Right of page</div>
<div class="middle">Middle of page</div>
